<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./css/事件.css">
</head>
<body>
    <div class="box">
        <label>
            <div class="add">+
                <input class="file" type="file" multiple>
            </div>
        </label>
        <div class="allItem">
        </div>
    </div>
    <div class="color-correction">
        <div class="colorAll">
            <div>
                <span>红色:</span><input class="correctionItem" value="0" type="range" min="0" max="255"><span>0</span>
            </div>
            <div>
                <span>绿色:</span><input class="correctionItem" value="0" type="range" min="0" max="255"><span>0</span>
            </div>
            <div>
                <span>蓝色:</span><input class="correctionItem" value="0" type="range" min="0" max="255"><span>0</span>
            </div>
            <div>
                <span>透明度:</span><input class="correctionItem" data-opcity="opcity" value="100" type="range" min="0" max="100"><span>100</span><span>%</span>
            </div>
        </div>
        <div class="showColor"></div>
    </div>
    <script>
        window.onload  = function(){
            var box = document.getElementsByClassName("box")[0];
            var allItem = document.getElementsByClassName("allItem")[0];
            var file = document.getElementsByClassName("file")[0];
            function reader(file){
                var reader = new FileReader();
                reader.onload = function(){
                    allItem.innerHTML+=
                    `<div class="item">
                        <img src="${reader.result}" alt="">
                    </div>`;
                }
                reader.readAsDataURL(file);
            }
            file.onchange = function(){
                [].forEach.call(this.files, reader)
            }
            box.style.display = "none";
            var correctionItems = document.querySelectorAll(".correctionItem");
            for(var i = 0;i<correctionItems.length;i++){
                correctionItems[i].oninput = function(){
                    this.nextElementSibling.textContent = this.value;
                    var showColor = document.querySelector(".showColor");
                    var rgba = [];
                    [].forEach.call(correctionItems, function(item){
                        rgba.push(item.value);
                    });
                    rgba[3] = rgba[3]/100;
                    rgba = rgba.join(",");
                    showColor.style.backgroundColor = `rgba(${rgba})`;
                }
            }
            correctionItems[0].oninput();
        }
    </script>
</body>
</html>